<template>
  <div class="wheat-data">
    <div class="action-bar">
      <div class="search-area">
        <el-input
          v-model="searchKeyword"
          placeholder="搜索样本编号、产地或检测员"
          style="width: 300px;"
          clearable
        >
          <template #prefix>
            <el-icon><Search /></el-icon>
          </template>
        </el-input>
        
        <el-select v-model="qualityFilter" placeholder="品质等级" style="width: 120px; margin-left: 12px;">
          <el-option label="全部" value="" />
          <el-option label="优质" value="excellent" />
          <el-option label="良好" value="good" />
          <el-option label="一般" value="normal" />
          <el-option label="较差" value="poor" />
        </el-select>
        
        <el-date-picker
          v-model="dateRange"
          type="daterange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          style="width: 240px; margin-left: 12px;"
        />
      </div>
      
      <div class="action-buttons">
        <el-button type="primary" @click="showAddDataDialog">
          <el-icon><Plus /></el-icon>
          添加数据
        </el-button>
        <el-button @click="importData">
          <el-icon><Upload /></el-icon>
          导入数据
        </el-button>
        <el-button @click="exportData">
          <el-icon><Download /></el-icon>
          导出数据
        </el-button>
      </div>
    </div>
    
    <el-table :data="filteredData" style="width: 100%" v-loading="loading">
      <el-table-column type="selection" width="55" />
      <el-table-column prop="id" label="样本编号" width="120" />
      <el-table-column prop="origin" label="产地" width="150" />
      <el-table-column prop="variety" label="品种" width="120" />
      <el-table-column prop="harvestDate" label="收获日期" width="120" />
      <el-table-column prop="protein" label="蛋白质(%)" width="100" />
      <el-table-column prop="moisture" label="水分(%)" width="100" />
      <el-table-column prop="ash" label="灰分(%)" width="100" />
      <el-table-column prop="gluten" label="面筋(%)" width="100" />
      <el-table-column prop="quality" label="品质等级" width="100">
        <template #default="{ row }">
          <el-tag :type="getQualityType(row.quality)" size="small">
            {{ getQualityLabel(row.quality) }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="inspector" label="检测员" width="100" />
      <el-table-column prop="testDate" label="检测日期" width="120" />
      <el-table-column label="操作" width="200" fixed="right">
        <template #default="{ row }">
          <el-button type="text" size="small" @click="viewDetail(row)">
            <el-icon><View /></el-icon>
            查看
          </el-button>
          <el-button type="text" size="small" @click="editData(row)">
            <el-icon><Edit /></el-icon>
            编辑
          </el-button>
          <el-button type="text" size="small" @click="deleteData(row)">
            <el-icon><Delete /></el-icon>
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    
    <div class="pagination-wrapper">
      <el-pagination
        v-model:current-page="currentPage"
        v-model:page-size="pageSize"
        :page-sizes="[10, 20, 50, 100]"
        :total="total"
        layout="total, sizes, prev, pager, next, jumper"
      />
    </div>
  </div>
</template>

<script>
import { ref, computed } from 'vue'

export default {
  name: 'WheatData',
  setup() {
    const loading = ref(false)
    const searchKeyword = ref('')
    const qualityFilter = ref('')
    const dateRange = ref([])
    const currentPage = ref(1)
    const pageSize = ref(20)
    const total = ref(0)
    
    const wheatData = ref([
      {
        id: 'WH2024001',
        origin: '河南省郑州市',
        variety: '郑麦366',
        harvestDate: '2024-06-15',
        protein: 12.5,
        moisture: 13.2,
        ash: 1.8,
        gluten: 28.5,
        quality: 'excellent',
        inspector: '张三',
        testDate: '2024-06-20'
      },
      {
        id: 'WH2024002',
        origin: '山东省济南市',
        variety: '济麦22',
        harvestDate: '2024-06-10',
        protein: 11.8,
        moisture: 14.1,
        ash: 1.9,
        gluten: 26.2,
        quality: 'good',
        inspector: '李四',
        testDate: '2024-06-18'
      },
      {
        id: 'WH2024003',
        origin: '河北省石家庄市',
        variety: '石麦15',
        harvestDate: '2024-06-12',
        protein: 10.5,
        moisture: 15.3,
        ash: 2.1,
        gluten: 24.8,
        quality: 'normal',
        inspector: '王五',
        testDate: '2024-06-22'
      }
    ])
    
    const filteredData = computed(() => {
      let filtered = wheatData.value
      
      if (searchKeyword.value) {
        filtered = filtered.filter(item => 
          item.id.includes(searchKeyword.value) ||
          item.origin.includes(searchKeyword.value) ||
          item.inspector.includes(searchKeyword.value)
        )
      }
      
      if (qualityFilter.value) {
        filtered = filtered.filter(item => item.quality === qualityFilter.value)
      }
      
      return filtered
    })
    
    const getQualityType = (quality) => {
      const types = {
        excellent: 'success',
        good: 'primary',
        normal: 'warning',
        poor: 'danger'
      }
      return types[quality] || 'info'
    }
    
    const getQualityLabel = (quality) => {
      const labels = {
        excellent: '优质',
        good: '良好',
        normal: '一般',
        poor: '较差'
      }
      return labels[quality] || '未知'
    }
    
    const showAddDataDialog = () => {
      ElMessage.info('添加数据功能开发中...')
    }
    
    const importData = () => {
      ElMessage.info('导入数据功能开发中...')
    }
    
    const exportData = () => {
      ElMessage.info('导出数据功能开发中...')
    }
    
    const viewDetail = (row) => {
      ElMessage.info('查看详情功能开发中...')
    }
    
    const editData = (row) => {
      ElMessage.info('编辑数据功能开发中...')
    }
    
    const deleteData = (row) => {
      ElMessageBox.confirm(
        `确定要删除样本 "${row.id}" 吗？`,
        '确认删除',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
        }
      ).then(() => {
        const index = wheatData.value.findIndex(item => item.id === row.id)
        if (index !== -1) {
          wheatData.value.splice(index, 1)
          ElMessage.success('数据删除成功')
        }
      })
    }
    
    return {
      loading,
      searchKeyword,
      qualityFilter,
      dateRange,
      currentPage,
      pageSize,
      total,
      filteredData,
      getQualityType,
      getQualityLabel,
      showAddDataDialog,
      importData,
      exportData,
      viewDetail,
      editData,
      deleteData
    }
  }
}
</script>

<style scoped>
.wheat-data {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.action-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #fff;
  padding: 16px 20px;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.search-area {
  display: flex;
  align-items: center;
}

.action-buttons {
  display: flex;
  gap: 12px;
}

.pagination-wrapper {
  display: flex;
  justify-content: center;
  margin-top: 20px;
}
</style>
